function ObjectsManager(){
    var twoPi = Math.PI*2;
    var ID_START = 152;
    this.objects = new Array();
    var interval = {
        SpotLight:0,
        PointLight:0,
        DirectionalLight:0,
        AmbientLight:0
    }

    var numbers = {
        BoxGeometry:0,
        SphereGeometry:0,
        CylinderGeometry:0,
        PlaneGeometry:0,
        SpotLight:0,
        PointLight:0,
        DirectionalLight:0,
        AmbientLight:0
    }
    this.boxNumber = 0;
    this.SphereNubmber = 0;
    this.CylinderNubmber = 0;
    this.PlaneNubmber = 0;
    this.spotLightNubmber = 0;
    this.pointLightNubmber = 0;
    this.directionalLightNubmber = 0;
    this.objects = new Array();
    this.ID_START = 152;
this.getObjectNumber = function(){
    var wholeNumber = 0;
   for(index in numbers){
        wholeNumber += numbers[index];
   }
   return wholeNumber;
}

this.addMesh = function(geometryType){
    // gui = new dat.GUI({autoPlace: false});
    gui = new dat.GUI({autoPlace: false});

    var mesh = new THREE.Mesh(
        new THREE.Geometry(),

        new THREE.MeshStandardMaterial({
            color: 0xffffff,
            // side: THREE.DoubleSide,
            shading: THREE.SmoothShading
        }));
    mesh.gui = gui;
    // mesh.position.setX(200);
    activeObject = mesh;
    // mesh.add( new THREE.LineSegments(

    //     new THREE.Geometry(),

    //     new THREE.LineBasicMaterial({
    //         color: 0xffffff,
    //         transparent: true,
    //         opacity: 0.5
    //     })

    // ));

    // mesh.add( new THREE.Mesh(

    //     new THREE.Geometry(),

    //     new THREE.MeshStandardMaterial({
    //         color: 0x000000,
    //         // side: THREE.DoubleSide,
    //         shading: THREE.FlatShading
    //     })

    // ));
    scene.add(mesh);
    control.attach(mesh);
    
    

    updateNumber(geometryType);//更新物体统计个数
    nameObject(mesh,geometryType);//给物体命名，包括改名字相应的事件
    outliner.addOutlinerItem(mesh.name,mesh.id);
    // modifierViewer.addObject(mesh.name,mesh.id);
    modifierViewer.update();
    modifierSelectorViewer.update();
    // console.log('我才不管，小哥是个笨蛋');
    buildGeometryGeneral(mesh);
    propertyPanel.update();

    addMaterialModifier(mesh);
    materialPanel.update();
    buildGeometryByType(mesh,geometryType);

    // return gui;
}

function updateNumber(type){
    numbers[type]++;
}
this.cloneMaterialModifier = function(mesh,clonedMesh){
    clonedMesh.materialGui = new dat.GUI({autoPlace: false});
    // var gui = mesh.materialGui;
    clonedMesh.material = new THREE.MeshStandardMaterial(mesh.material.clone());
    // clonedMesh.material.needsUpdate = true;
    // clonedMesh.material.shading = THREE.SmoothShading;
    // if(clonedMesh.material.shading == mesh.material.shading)console.log('两者材质一模一样');
    var data = {
        color: mesh.material.color.getHex(),
        emissive: mesh.material.emissive.getHex(),
        shading: clonedMesh.material.shading == THREE.SmoothShading ? 'smooth':'flat',
        side:'front'
    }

    clonedMesh.materialGui.addColor(data,'color').onChange(function(e){
        clonedMesh.material.color = new THREE.Color(e);
    });
    clonedMesh.materialGui.addColor(data,'emissive').onChange(function(e){
        clonedMesh.material.emissive = new THREE.Color(e);
    });
    clonedMesh.materialGui.add(clonedMesh.material,'roughness',0,1);
    clonedMesh.materialGui.add(clonedMesh.material,'metalness',0,1);

    clonedMesh.materialGui.add(data,'side',['front','back','double']).onChange(function(e){
        // clonedMesh.material.needsUpdate = true;
        switch (e) {
            case 'front':
                // 
                clonedMesh.material.side= THREE.FrontSide;
                break;
            case 'back':
                // 
                clonedMesh.material.side = THREE.BackSide;
                break;
            case 'double':
                // 
                clonedMesh.material.side = THREE.DoubleSide;
                break;
        }
    });
    clonedMesh.materialGui.add(data,'shading',['smooth','flat']).onChange(function(e){
        // console.log(clonedMesh.material.needsUpdate);
        clonedMesh.material.needsUpdate = true;
        console.log('着色方式改变了呗');
        switch (e) {
            case 'smooth':
                // statements_1
                clonedMesh.material.shading = THREE.SmoothShading;
                break;
            case 'flat':
                // statements_1
                clonedMesh.material.shading = THREE.FlatShading;
                break;
        }
    });
    
    // uiAddMap(clonedMesh.materialGui.domElement);
    //加贴图
    MyUI.mapUI(clonedMesh.materialGui.domElement,'map',clonedMesh.material,false);
    // var canvas = mesh.materialGui.domElement.getElementsbyTagName(canvas);
    // var list =  mesh.materialGui.domElement.getElementById("material");
    // var clonedlist =  clonedMesh.materialGui.domElement.getElementById("material");
    var input = mesh.materialGui.domElement.getElementsByTagName("input");
    var clonedInput = clonedMesh.materialGui.domElement.getElementsByTagName("input");
    clonedInput[5].value = input[5].value;
    var snapShoot = mesh.materialGui.domElement.getElementsByTagName("canvas");
    var clonedSnapShoot = clonedMesh.materialGui.domElement.getElementsByTagName("canvas");
    var imgData=snapShoot[0].getContext("2d").getImageData(0,0,32,16);
    clonedSnapShoot[0].getContext("2d").putImageData(imgData,0,0);
    // console.log(input);
    // console.log(input[5]);
    // console.log(input[5].value);
    // console.log(clonedInput);
    // console.log(clonedInput[5]);
    // console.log(clonedInput[5].value);

    // console.log(snapShoot);
    // console.log(clonedSnapShoot);
    clonedMesh.materialGui.add(clonedMesh.material,'transparent');
    clonedMesh.materialGui.add(clonedMesh.material,'opacity',0,1);

    clonedMesh.materialGui.add(clonedMesh.material,'wireframe');

    
}
function addMaterialModifier(mesh){
    mesh.materialGui = new dat.GUI({autoPlace: false});
    // var gui = mesh.materialGui;

    var data = {
        color: mesh.material.color.getHex(),
        emissive: mesh.material.emissive.getHex(),
        shading: 'smooth',
        side:'front'
    }

    mesh.materialGui.addColor(data,'color').onChange(function(e){
        mesh.material.color = new THREE.Color(e);
    });
    mesh.materialGui.addColor(data,'emissive').onChange(function(e){
        mesh.material.emissive = new THREE.Color(e);
    });
    mesh.materialGui.add(mesh.material,'roughness',0,1);
    mesh.materialGui.add(mesh.material,'metalness',0,1);

    mesh.materialGui.add(data,'side',['front','back','double']).onChange(function(e){
        // mesh.material.needsUpdate = true;
        switch (e) {
            case 'front':
                // 
                mesh.material.side= THREE.FrontSide;
                break;
            case 'back':
                // 
                mesh.material.side = THREE.BackSide;
                break;
            case 'double':
                // 
                mesh.material.side = THREE.DoubleSide;
                break;
        }
    });
    mesh.materialGui.add(data,'shading',['smooth','flat']).onChange(function(e){
        // console.log(mesh.material.needsUpdate); 
        console.log('着色方式改变了呗');
        mesh.material.needsUpdate = true;
        switch (e) {
            case 'smooth':
                // statements_1
                mesh.material.shading = THREE.SmoothShading;
                break;
            case 'flat':
                // statements_1
                mesh.material.shading = THREE.FlatShading;
                break;
        }
    });
    
    // uiAddMap(mesh.materialGui.domElement);
    //加贴图
    MyUI.mapUI(mesh.materialGui.domElement,'map',mesh.material,false);

    mesh.materialGui.add(mesh.material,'transparent');
    mesh.materialGui.add(mesh.material,'opacity',0,1);

    mesh.materialGui.add(mesh.material,'wireframe');

    
}
this.update = update;
function update() {

        var object = activeObject;

        var geometry = object.geometry;
        var material = object.material;

        var textureWarning = false;
        var objectHasUvs = false;

        if ( object instanceof THREE.Sprite ) objectHasUvs = true;
        if ( geometry instanceof THREE.Geometry && geometry.faceVertexUvs[ 0 ].length > 0 ) objectHasUvs = true;
        if ( geometry instanceof THREE.BufferGeometry && geometry.attributes.uv !== undefined ) objectHasUvs = true;

        if ( material ) {

            // if ( material.uuid !== undefined && material.uuid !== materialUUID.getValue() ) {

            //     editor.execute( new SetMaterialValueCommand( currentObject, 'uuid', materialUUID.getValue() ) );

            // }

            // if ( material instanceof THREE[ materialClass.getValue() ] === false ) {

                material = new THREE[ materialClass.getValue() ]();

                editor.execute( new SetMaterialCommand( currentObject, material ), 'New Material: ' + materialClass.getValue() );
                // TODO Copy other references in the scene graph
                // keeping name and UUID then.
                // Also there should be means to create a unique
                // copy for the current object explicitly and to
                // attach the current material to other objects.

            // }

            if ( material.color !== undefined && material.color.getHex() !== materialColor.getHexValue() ) {

                editor.execute( new SetMaterialColorCommand( currentObject, 'color', materialColor.getHexValue() ) );

            }

            if ( material.roughness !== undefined && Math.abs( material.roughness - materialRoughness.getValue() ) >= 0.01 ) {

                editor.execute( new SetMaterialValueCommand( currentObject, 'roughness', materialRoughness.getValue() ) );

            }

            if ( material.metalness !== undefined && Math.abs( material.metalness - materialMetalness.getValue() ) >= 0.01 ) {

                editor.execute( new SetMaterialValueCommand( currentObject, 'metalness', materialMetalness.getValue() ) );

            }

            if ( material.emissive !== undefined && material.emissive.getHex() !== materialEmissive.getHexValue() ) {

                editor.execute( new SetMaterialColorCommand( currentObject, 'emissive', materialEmissive.getHexValue() ) );

            }

            if ( material.specular !== undefined && material.specular.getHex() !== materialSpecular.getHexValue() ) {

                editor.execute( new SetMaterialColorCommand( currentObject, 'specular', materialSpecular.getHexValue() ) );

            }

            if ( material.shininess !== undefined && Math.abs( material.shininess - materialShininess.getValue() ) >= 0.01 ) {

                editor.execute( new SetMaterialValueCommand( currentObject, 'shininess', materialShininess.getValue() ) );

            }

            if ( material.vertexColors !== undefined ) {

                var vertexColors = parseInt( materialVertexColors.getValue() );

                if ( material.vertexColors !== vertexColors ) {

                    editor.execute( new SetMaterialValueCommand( currentObject, 'vertexColors', vertexColors ) );

                }

            }

            if ( material.skinning !== undefined && material.skinning !== materialSkinning.getValue() ) {

                editor.execute( new SetMaterialValueCommand( currentObject, 'skinning', materialSkinning.getValue() ) );

            }

            if ( material.map !== undefined ) {

                var mapEnabled = materialMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var map = mapEnabled ? materialMap.getValue() : null;
                    if ( material.map !== map ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'map', map ) );

                    }

                } else {

                    if ( mapEnabled ) textureWarning = true;

                }

            }

            if ( material.alphaMap !== undefined ) {

                var mapEnabled = materialAlphaMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var alphaMap = mapEnabled ? materialAlphaMap.getValue() : null;
                    if ( material.alphaMap !== alphaMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'alphaMap', alphaMap ) );

                    }

                } else {

                    if ( mapEnabled ) textureWarning = true;

                }

            }

            if ( material.bumpMap !== undefined ) {

                var bumpMapEnabled = materialBumpMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var bumpMap = bumpMapEnabled ? materialBumpMap.getValue() : null;
                    if ( material.bumpMap !== bumpMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'bumpMap', bumpMap ) );

                    }

                    if ( material.bumpScale !== materialBumpScale.getValue() ) {

                        editor.execute( new SetMaterialValueCommand( currentObject, 'bumpScale', materialBumpScale.getValue() ) );

                    }

                } else {

                    if ( bumpMapEnabled ) textureWarning = true;

                }

            }

            if ( material.normalMap !== undefined ) {

                var normalMapEnabled = materialNormalMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var normalMap = normalMapEnabled ? materialNormalMap.getValue() : null;
                    if ( material.normalMap !== normalMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'normalMap', normalMap ) );

                    }

                } else {

                    if ( normalMapEnabled ) textureWarning = true;

                }

            }

            if ( material.displacementMap !== undefined ) {

                var displacementMapEnabled = materialDisplacementMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var displacementMap = displacementMapEnabled ? materialDisplacementMap.getValue() : null;
                    if ( material.displacementMap !== displacementMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'displacementMap', displacementMap ) );

                    }

                    if ( material.displacementScale !== materialDisplacementScale.getValue() ) {

                        editor.execute( new SetMaterialValueCommand( currentObject, 'displacementScale', materialDisplacementScale.getValue() ) );

                    }

                } else {

                    if ( displacementMapEnabled ) textureWarning = true;

                }

            }

            if ( material.roughnessMap !== undefined ) {

                var roughnessMapEnabled = materialRoughnessMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var roughnessMap = roughnessMapEnabled ? materialRoughnessMap.getValue() : null;
                    if ( material.roughnessMap !== roughnessMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'roughnessMap', roughnessMap ) );

                    }

                    if ( material.displacementScale !== materialDisplacementScale.getValue() ) {

                        editor.execute( new SetMaterialValueCommand( currentObject, 'displacementScale', materialDisplacementScale.getValue() ) );

                    }

                } else {

                    if ( roughnessMapEnabled ) textureWarning = true;

                }

            }

            if ( material.metalnessMap !== undefined ) {

                var metalnessMapEnabled = materialMetalnessMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var metalnessMap = metalnessMapEnabled ? materialMetalnessMap.getValue() : null;
                    if ( material.metalnessMap !== metalnessMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'metalnessMap', metalnessMap ) );

                    }

                    if ( material.displacementScale !== materialDisplacementScale.getValue() ) {

                        editor.execute( new SetMaterialValueCommand( currentObject, 'displacementScale', materialDisplacementScale.getValue() ) );

                    }

                } else {

                    if ( metalnessMapEnabled ) textureWarning = true;

                }

            }

            if ( material.specularMap !== undefined ) {

                var specularMapEnabled = materialSpecularMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var specularMap = specularMapEnabled ? materialSpecularMap.getValue() : null;
                    if ( material.specularMap !== specularMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'specularMap', specularMap ) );

                    }

                } else {

                    if ( specularMapEnabled ) textureWarning = true;

                }

            }

            if ( material.envMap !== undefined ) {

                var envMapEnabled = materialEnvMapEnabled.getValue() === true;

                var envMap = envMapEnabled ? materialEnvMap.getValue() : null;

                if ( material.envMap !== envMap ) {

                    editor.execute( new SetMaterialMapCommand( currentObject, 'envMap', envMap ) );

                }

                if ( material.reflectivity !== materialReflectivity.getValue() ) {

                    editor.execute( new SetMaterialValueCommand( currentObject, 'reflectivity', materialReflectivity.getValue() ) );

                }

            }

            if ( material.lightMap !== undefined ) {

                var lightMapEnabled = materialLightMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var lightMap = lightMapEnabled ? materialLightMap.getValue() : null;
                    if ( material.lightMap !== lightMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'lightMap', lightMap ) );

                    }

                } else {

                    if ( lightMapEnabled ) textureWarning = true;

                }

            }

            if ( material.aoMap !== undefined ) {

                var aoMapEnabled = materialAOMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var aoMap = aoMapEnabled ? materialAOMap.getValue() : null;
                    if ( material.aoMap !== aoMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'aoMap', aoMap ) );

                    }

                    if ( material.aoMapIntensity !== materialAOScale.getValue() ) {

                        editor.execute( new SetMaterialValueCommand( currentObject, 'aoMapIntensity', materialAOScale.getValue() ) );

                    }

                } else {

                    if ( aoMapEnabled ) textureWarning = true;

                }

            }

            if ( material.emissiveMap !== undefined ) {

                var emissiveMapEnabled = materialEmissiveMapEnabled.getValue() === true;

                if ( objectHasUvs ) {

                    var emissiveMap = emissiveMapEnabled ? materialEmissiveMap.getValue() : null;
                    if ( material.emissiveMap !== emissiveMap ) {

                        editor.execute( new SetMaterialMapCommand( currentObject, 'emissiveMap', emissiveMap ) );

                    }

                } else {

                    if ( emissiveMapEnabled ) textureWarning = true;

                }

            }

            if ( material.side !== undefined ) {

                var side = parseInt( materialSide.getValue() );
                if ( material.side !== side ) {

                    editor.execute( new SetMaterialValueCommand( currentObject, 'side', side ) );

                }


            }

            if ( material.shading !== undefined ) {

                var shading = parseInt( materialShading.getValue() );
                if ( material.shading !== shading ) {

                    editor.execute( new SetMaterialValueCommand( currentObject, 'shading', shading ) );

                }

            }

            if ( material.blending !== undefined ) {

                var blending = parseInt( materialBlending.getValue() );
                if ( material.blending !== blending ) {

                    editor.execute( new SetMaterialValueCommand( currentObject, 'blending', blending ) );

                }

            }

            if ( material.opacity !== undefined && Math.abs( material.opacity - materialOpacity.getValue() ) >= 0.01 ) {

                editor.execute( new SetMaterialValueCommand( currentObject, 'opacity', materialOpacity.getValue() ) );

            }

            if ( material.transparent !== undefined && material.transparent !== materialTransparent.getValue() ) {

                editor.execute( new SetMaterialValueCommand( currentObject, 'transparent', materialTransparent.getValue() ) );

            }

            if ( material.alphaTest !== undefined && Math.abs( material.alphaTest - materialAlphaTest.getValue() ) >= 0.01 ) {

                editor.execute( new SetMaterialValueCommand( currentObject, 'alphaTest', materialAlphaTest.getValue() ) );

            }

            if ( material.wireframe !== undefined && material.wireframe !== materialWireframe.getValue() ) {

                editor.execute( new SetMaterialValueCommand( currentObject, 'wireframe', materialWireframe.getValue() ) );

            }

            if ( material.wireframeLinewidth !== undefined && Math.abs( material.wireframeLinewidth - materialWireframeLinewidth.getValue() ) >= 0.01 ) {

                editor.execute( new SetMaterialValueCommand( currentObject, 'wireframeLinewidth', materialWireframeLinewidth.getValue() ) );

            }

            refreshUI( false );

            signals.materialChanged.dispatch( material );

        }

        if ( textureWarning ) {

            console.warn( "Can't set texture, model doesn't have texture coordinates" );

        }

    }
// function uiAddMap(container){
//     // map

//     var materialMapRow = new UI.Row();
//     // console.log(materialMapRow.dom);
//     var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
//     var materialMap = new UI.Texture().onChange( update );

//     materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ) );
//     materialMapRow.add( materialMapEnabled );
//     materialMapRow.add( materialMap );

//     container.appendChild( materialMapRow.dom );

//     // alpha map

//     // var materialAlphaMapRow = new UI.Row();
//     // var materialAlphaMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialAlphaMap = new UI.Texture().onChange( update );

//     // materialAlphaMapRow.add( new UI.Text( 'Alpha Map' ).setWidth( '90px' ) );
//     // materialAlphaMapRow.add( materialAlphaMapEnabled );
//     // materialAlphaMapRow.add( materialAlphaMap );

//     // container.appendChild( materialAlphaMapRow );

//     // // bump map

//     // var materialBumpMapRow = new UI.Row();
//     // var materialBumpMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialBumpMap = new UI.Texture().onChange( update );
//     // var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );

//     // materialBumpMapRow.add( new UI.Text( 'Bump Map' ).setWidth( '90px' ) );
//     // materialBumpMapRow.add( materialBumpMapEnabled );
//     // materialBumpMapRow.add( materialBumpMap );
//     // materialBumpMapRow.add( materialBumpScale );

//     // container.appendChild( materialBumpMapRow );

//     // // normal map

//     // var materialNormalMapRow = new UI.Row();
//     // var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialNormalMap = new UI.Texture().onChange( update );

//     // materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ) );
//     // materialNormalMapRow.add( materialNormalMapEnabled );
//     // materialNormalMapRow.add( materialNormalMap );

//     // container.appendChild( materialNormalMapRow );

//     // // displacement map

//     // var materialDisplacementMapRow = new UI.Row();
//     // var materialDisplacementMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialDisplacementMap = new UI.Texture().onChange( update );
//     // var materialDisplacementScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );

//     // materialDisplacementMapRow.add( new UI.Text( 'Displace Map' ).setWidth( '90px' ) );
//     // materialDisplacementMapRow.add( materialDisplacementMapEnabled );
//     // materialDisplacementMapRow.add( materialDisplacementMap );
//     // materialDisplacementMapRow.add( materialDisplacementScale );

//     // container.appendChild( materialDisplacementMapRow );

//     // // roughness map

//     // var materialRoughnessMapRow = new UI.Row();
//     // var materialRoughnessMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialRoughnessMap = new UI.Texture().onChange( update );

//     // materialRoughnessMapRow.add( new UI.Text( 'Rough. Map' ).setWidth( '90px' ) );
//     // materialRoughnessMapRow.add( materialRoughnessMapEnabled );
//     // materialRoughnessMapRow.add( materialRoughnessMap );

//     // container.appendChild( materialRoughnessMapRow );

//     // // metalness map

//     // var materialMetalnessMapRow = new UI.Row();
//     // var materialMetalnessMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialMetalnessMap = new UI.Texture().onChange( update );

//     // materialMetalnessMapRow.add( new UI.Text( 'Metal. Map' ).setWidth( '90px' ) );
//     // materialMetalnessMapRow.add( materialMetalnessMapEnabled );
//     // materialMetalnessMapRow.add( materialMetalnessMap );

//     // container.appendChild( materialMetalnessMapRow );

//     // // specular map

//     // var materialSpecularMapRow = new UI.Row();
//     // var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialSpecularMap = new UI.Texture().onChange( update );

//     // materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ) );
//     // materialSpecularMapRow.add( materialSpecularMapEnabled );
//     // materialSpecularMapRow.add( materialSpecularMap );

//     // container.appendChild( materialSpecularMapRow );

//     // // env map

//     // var materialEnvMapRow = new UI.Row();
//     // var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialEnvMap = new UI.Texture( THREE.SphericalReflectionMapping ).onChange( update );
//     // var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );

//     // materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ) );
//     // materialEnvMapRow.add( materialEnvMapEnabled );
//     // materialEnvMapRow.add( materialEnvMap );
//     // materialEnvMapRow.add( materialReflectivity );

//     // container.appendChild( materialEnvMapRow );

//     // // light map

//     // var materialLightMapRow = new UI.Row();
//     // var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialLightMap = new UI.Texture().onChange( update );

//     // materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ) );
//     // materialLightMapRow.add( materialLightMapEnabled );
//     // materialLightMapRow.add( materialLightMap );

//     // container.appendChild( materialLightMapRow );

//     // // ambient occlusion map

//     // var materialAOMapRow = new UI.Row();
//     // var materialAOMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialAOMap = new UI.Texture().onChange( update );
//     // var materialAOScale = new UI.Number( 1 ).setRange( 0, 1 ).setWidth( '30px' ).onChange( update );

//     // materialAOMapRow.add( new UI.Text( 'AO Map' ).setWidth( '90px' ) );
//     // materialAOMapRow.add( materialAOMapEnabled );
//     // materialAOMapRow.add( materialAOMap );
//     // materialAOMapRow.add( materialAOScale );

//     // container.appendChild( materialAOMapRow );

//     // // emissive map

//     // var materialEmissiveMapRow = new UI.Row();
//     // var materialEmissiveMapEnabled = new UI.Checkbox( false ).onChange( update );
//     // var materialEmissiveMap = new UI.Texture().onChange( update );

//     // materialEmissiveMapRow.add( new UI.Text( 'Emissive Map' ).setWidth( '90px' ) );
//     // materialEmissiveMapRow.add( materialEmissiveMapEnabled );
//     // materialEmissiveMapRow.add( materialEmissiveMap );

//     // container.appendChild( materialEmissiveMapRow );
// }

function nameObject(object,type){
    switch (type) {
        case 'BoxGeometry':
            object.name = '立方体 ' + numbers[type];
            break;
        case 'SphereGeometry':
            object.name = '球体 ' + numbers[type];
            break;
        case 'CylinderGeometry':
            object.name = '圆柱体 ' + numbers[type];
            break;
        case 'PlaneGeometry':
            object.name = '平面 ' + numbers[type];
            break;
        case 'SpotLight':
            object.name = '聚光灯 ' + numbers[type];
            break;
        case 'PointLight':
            object.name = '点光源 ' + numbers[type];
            break;
        case 'DirectionalLight':
            object.name = '平行光 ' + numbers[type];
            break;
        case 'AmbientLight':
            object.name = '环境光 ' + numbers[type];
            break;
        default:
            // statements_def
            break;
    }
    
}
this.buildGeometryGeneral = buildGeometryGeneral;
function buildGeometryGeneral(mesh){
    // console.log(mesh.children[0].geometry);
    mesh.gui.add(mesh,'name').onChange(function(name){
        mesh.name = name;
        outliner.updateName(name,mesh.id);
    });
    var pos = mesh.gui.addFolder('position');
    pos.add(mesh.position,'x').listen();
    pos.add(mesh.position,'y').listen();
    pos.add(mesh.position,'z').listen();
    var pos = mesh.gui.addFolder('rotation');
    pos.add(mesh.rotation,'x').listen();
    pos.add(mesh.rotation,'y').listen();
    pos.add(mesh.rotation,'z').listen();
    var pos = mesh.gui.addFolder('scale');
    pos.add(mesh.scale,'x').listen();
    pos.add(mesh.scale,'y').listen();
    pos.add(mesh.scale,'z').listen();

}
this.buildGeometryByType = buildGeometryByType;
function buildGeometryByType(mesh,geometryType){
    var selectedGeometry = geometryType || null;

    if ( guis[ selectedGeometry ] !== undefined ) {

        guis[ selectedGeometry ]( mesh );
        guis[ 'GeometryGeneral' ]( mesh );

    }

    if ( selectedGeometry === 'TextGeometry' ) {

        return { fixed : true };

    }

    //No configuration options
    return {};
}

function updateGroupGeometry( mesh, geometry ) {
    mesh.geometry.dispose();
    mesh.geometry = geometry;
}

guis = {
    GeometryGeneral : function(mesh){
        mesh.gui.add(mesh,'visible');
        mesh.gui.add(mesh,'castShadow');
        mesh.gui.add(mesh,'receiveShadow');
    },

    BoxGeometry : function( mesh ) {

        var data = {
            width : 15,
            height : 15,
            depth : 15,
            widthSegments : 1,
            heightSegments : 1,
            depthSegments : 1
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.BoxGeometry(
                    data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
                )
            );

        }

        var folder = gui.addFolder( 'THREE.BoxGeometry' );

        folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );

        generateGeometry();

    },
    BoxClone:function(mesh,clonedMesh){
        var data = {
            width : mesh.geometry.parameters.width,
            height : mesh.geometry.parameters.height,
            depth : mesh.geometry.parameters.depth,
            widthSegments : mesh.geometry.parameters.widthSegments,
            heightSegments : mesh.geometry.parameters.heightSegments,
            depthSegments : mesh.geometry.parameters.depthSegments
        };

        function generateGeometry() {

            updateGroupGeometry( clonedMesh,
                new THREE.BoxGeometry(
                    data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
                )
            );
            console.log("这里说明程序执行了");
        }

        var folder = clonedMesh.gui.addFolder( 'THREE.BoxGeometry' );

        folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );

        generateGeometry();
    },
    CylinderGeometry : function( mesh ) {

        var data = {
            radiusTop : 5,
            radiusBottom : 5,
            height : 10,
            radiusSegments : 8,
            heightSegments : 1,
            openEnded : false,
            thetaStart : 0,
            thetaLength : twoPi,
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.CylinderGeometry(
                    data.radiusTop,
                    data.radiusBottom,
                    data.height,
                    data.radiusSegments,
                    data.heightSegments,
                    data.openEnded,
                    data.thetaStart,
                    data.thetaLength
                )
            );

        }

        var folder = gui.addFolder( 'THREE.CylinderGeometry' );

        folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
        folder.add( data, 'radiusSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'openEnded' ).onChange( generateGeometry );
        folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );


        generateGeometry();

    },
    CylinderClone:function(mesh,clonedMesh){
         var data = {
            radiusTop : mesh.geometry.parameters.radiusTop,
            radiusBottom : mesh.geometry.parameters.radiusBottom,
            height : mesh.geometry.parameters.height,
            radiusSegments : mesh.geometry.parameters.radiusSegments,
            heightSegments : mesh.geometry.parameters.heightSegments,
            openEnded : mesh.geometry.parameters.openEnded,
            thetaStart : mesh.geometry.parameters.thetaStart,
            thetaLength : mesh.geometry.parameters.thetaLength,
        };

        function generateGeometry() {

            updateGroupGeometry( clonedMesh,
                new THREE.CylinderGeometry(
                    data.radiusTop,
                    data.radiusBottom,
                    data.height,
                    data.radiusSegments,
                    data.heightSegments,
                    data.openEnded,
                    data.thetaStart,
                    data.thetaLength
                )
            );

        }

        var folder = clonedMesh.gui.addFolder( 'THREE.CylinderGeometry' );

        folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
        folder.add( data, 'radiusSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'openEnded' ).onChange( generateGeometry );
        folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );


        generateGeometry();
    },
    SphereGeometry : function( mesh ) {

        var data = {
            radius : 15,
            widthSegments : 8,
            heightSegments : 6,
            phiStart : 0,
            phiLength : twoPi,
            thetaStart : 0,
            thetaLength : Math.PI,
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.SphereGeometry(
                    data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
                )
            );

        }

        var folder = gui.addFolder( 'THREE.SphereGeometry' );

        folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );

        generateGeometry();

    },
    SphereClone:function(mesh,clonedMesh){
        var data = {
            radius : mesh.geometry.parameters.radius,
            widthSegments : mesh.geometry.parameters.widthSegments,
            heightSegments : mesh.geometry.parameters.heightSegments,
            phiStart : mesh.geometry.parameters.phiStart,
            phiLength : mesh.geometry.parameters.phiLength,
            thetaStart : mesh.geometry.parameters.thetaStart,
            thetaLength : mesh.geometry.parameters.thetaLength,
        };

        function generateGeometry() {

            updateGroupGeometry( clonedMesh,
                new THREE.SphereGeometry(
                    data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
                )
            );

        }

        var folder = clonedMesh.gui.addFolder( 'THREE.SphereGeometry' );

        folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );

        generateGeometry();
    },
    CircleGeometry : function( mesh ) {

        var data = {
            radius : 10,
            segments : 32,
            thetaStart : 0,
            thetaLength : twoPi,
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.CircleGeometry(
                    data.radius, data.segments, data.thetaStart, data.thetaLength
                )
            );

        }

        var folder = gui.addFolder( 'THREE.CircleGeometry' );

        folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
        folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );

        generateGeometry();

    },

    DodecahedronGeometry : function() {

        var data = {
            radius : 10,
            detail : 0,
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.DodecahedronGeometry(
                    data.radius, data.detail
                )
            );

        }

        var folder = gui.addFolder( 'THREE.DodecahedronGeometry' );

        folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
        folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

        generateGeometry();

    },

    IcosahedronGeometry : function() {

        var data = {
            radius : 10,
            detail : 0,
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.IcosahedronGeometry(
                    data.radius, data.detail
                )
            );

        }

        var folder = gui.addFolder( 'THREE.IcosahedronGeometry' );

        folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
        folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

        generateGeometry();

    },

    OctahedronGeometry : function() {

        var data = {
            radius : 10,
            detail : 0,
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.OctahedronGeometry(
                    data.radius, data.detail
                )
            );

        }

        var folder = gui.addFolder( 'THREE.OctahedronGeometry' );

        folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
        folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

        generateGeometry();

    },

    PlaneGeometry : function( mesh ) {

        var data = {
            width : 10,
            height : 10,
            widthSegments : 1,
            heightSegments : 1
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.PlaneGeometry(
                    data.width, data.height, data.widthSegments, data.heightSegments
                )
            );

        }

        var folder = gui.addFolder( 'THREE.PlaneGeometry' );

        folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );

        generateGeometry();

    },
    PlaneClone :function(mesh,clonedMesh){
        var data = {
            width : mesh.geometry.parameters.width,
            height : mesh.geometry.parameters.height,
            widthSegments : mesh.geometry.parameters.widthSegments,
            heightSegments : mesh.geometry.parameters.heightSegments
        };

        function generateGeometry() {

            updateGroupGeometry( clonedMesh,
                new THREE.PlaneGeometry(
                    data.width, data.height, data.widthSegments, data.heightSegments
                )
            );

        }

        var folder = clonedMesh.gui.addFolder( 'THREE.PlaneGeometry' );

        folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );

        generateGeometry();
    },
    RingGeometry : function( mesh ) {

        var data = {
            innerRadius : 5,
            outerRadius : 10,
            thetaSegments : 8,
            phiSegments : 8,
            thetaStart : 0,
            thetaLength : twoPi,
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.RingGeometry(
                    data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
                )
            );

        }

        var folder = gui.addFolder( 'THREE.RingGeometry' );

        folder.add( data, 'innerRadius', 0, 30 ).onChange( generateGeometry );
        folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
        folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );

        generateGeometry();

    },


    TetrahedronGeometry : function() {

        var data = {
            radius : 10,
            detail : 0,
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.TetrahedronGeometry(
                    data.radius, data.detail
                )
            );

        }

        var folder = gui.addFolder( 'THREE.TetrahedronGeometry' );

        folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
        folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );

        generateGeometry();

    },

    TextGeometry : function( mesh ) {

        var data = {
            text : "TextGeometry",
            size : 5,
            height : 2,
            curveSegments : 12,
            font : "helvetiker",
            weight : "regular",
            bevelEnabled : false,
            bevelThickness : 1,
            bevelSize : 0.5
        };

        var fonts = [
            "helvetiker",
            "optimer",
            "gentilis",
            "droid/droid_serif"
        ];

        var weights = [
            "regular", "bold"
        ];

        function generateGeometry() {

            var loader = new THREE.FontLoader();
            loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.js', function ( font ) {

                var geometry = new THREE.TextGeometry( data.text, {
                    font: font,
                    size: data.size,
                    height: data.height,
                    curveSegments: data.curveSegments,
                    bevelEnabled: data.bevelEnabled,
                    bevelThickness: data.bevelThickness,
                    bevelSize: data.bevelSize
                } );
                geometry.center();

                updateGroupGeometry( mesh, geometry );

            } );

        }

        //Hide the wireframe
        mesh.children[ 0 ].visible = false;

        var folder = gui.addFolder( 'THREE.TextGeometry' );

        folder.add( data, 'text' ).onChange( generateGeometry );
        folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
        folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
        folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'font', fonts ).onChange( generateGeometry );
        folder.add( data, 'weight', weights ).onChange( generateGeometry );
        folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
        folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
        folder.add( data, 'bevelSize', 0.1, 3 ).onChange( generateGeometry );

        generateGeometry();

    },

    TorusGeometry : function( mesh ) {

        var data = {
            radius : 10,
            tube : 3,
            radialSegments : 16,
            tubularSegments : 100,
            arc : twoPi
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.TorusGeometry(
                    data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
                )
            );

        }

        var folder = gui.addFolder( 'THREE.TorusGeometry' );

        folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
        folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
        folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );

        generateGeometry();

    },

    TorusKnotGeometry : function( mesh ) {

        var data = {
            radius : 10,
            tube : 3,
            radialSegments : 64,
            tubularSegments : 8,
            p : 2,
            q : 3,
            heightScale : 1
        };

        function generateGeometry() {

            updateGroupGeometry( mesh,
                new THREE.TorusKnotGeometry(
                    data.radius, data.tube, data.radialSegments, data.tubularSegments,
                    data.p, data.q, data.heightScale
                )
            );

        }

        var folder = gui.addFolder( 'THREE.TorusGeometry' );

        folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
        folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
        folder.add( data, 'radialSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'tubularSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
        folder.add( data, 'heightScale', 1, 20 ).onChange( generateGeometry );

        generateGeometry();

    }

};

var lights = {
    ObjectGeneral : function(light){
        var pos = gui.addFolder('position');
        pos.add(light.position,'x').listen();
        pos.add(light.position,'y').listen();
        pos.add(light.position,'z').listen();
    },

    LightGeneral : function(light){
        // var pos = gui.addFolder('position');
        gui.add(light,'visible');
        // gui.add(light,'castShadow');
        // gui.add(light,'z');
    },

    SwitchShadow : function(light){
        // var pos = gui.addFolder('position');
        // gui.add(light,'visible');
        gui.add(light,'castShadow');
        // gui.add(light,'z');
    },

    PointLight : function(light){
        var data = {
            color : light.color.getHex()
        }
        var folder = gui.addFolder('PointLight');
        folder.addColor(data,'color').onChange(function(e){
            light.color = new THREE.Color(e);
        });
        folder.add(light,'intensity',0,3);
        folder.add(light,'distance',0,500);
    },

    AmbientLight : function(light){
        var data = {
            color : light.color.getHex()
        }
        var folder = gui.addFolder('AmbientLight');
        folder.addColor(data,'color').onChange(function(e){
            light.color = new THREE.Color(e);
        });
        folder.add(light,'intensity',0,3);
    },

    SpotLight : function(light){
        var data = {
            color : light.color.getHex(),
            angle : light.angle * 180 / Math.PI
        }
        var folder = gui.addFolder('SpotLight');
        folder.addColor(data,'color').onChange(function(e){
            light.color = new THREE.Color(e);
        });
        folder.add(light,'intensity',0,3);
        folder.add(light,'distance',0,1000);
        folder.add(data,'angle',0,90).onChange(function(e){
            light.angle = e * Math.PI / 180;
        });
        folder.add(light,'penumbra',0,1);
        folder.add(light,'decay',0,100);
    },

    DirectionalLight : function(light){
        var data = {
            color : light.color.getHex()
        }
        var folder = gui.addFolder('DirectionalLight');
        folder.addColor(data,'color').onChange(function(e){
            light.color = new THREE.Color(e);
        });
        folder.add(light,'intensity',0,3);
    }
};

this.addObjectLight = function(lightType){
    gui = new dat.GUI({autoPlace: false});
    if(lightType == 'SpotLight'){
        var light = new THREE.SpotLight( 0xffffff, 1, 200, Math.PI/6);

        light.position.set( 0, 100, 0 );
        var helper = new THREE.SpotLightHelper( light );
        // light.castShadow = true;

         // 根据helper的LightPlane设定可以被选中的mesh
        var geometry = new THREE.CubeGeometry( 20,20,20);
        
    }
    else if(lightType == 'DirectionalLight'){
        var lightSize = 10;
        var lightHight = 70;

        var light = new THREE.DirectionalLight( 0xffffff, 1 );
        light.position.set( 0, lightHight, 0 );

        // light.castShadow = true;
        //可视化灯光
        var helper = new THREE.DirectionalLightHelper(light,lightSize); 
        helper.matrixAutoUpdate = true;

        //根据helper的LightPlane设定可以被选中的mesh
        var geometry = new THREE.CubeGeometry( lightSize*2,0.2,lightSize*2);
    }
    var transparentMaterial = new THREE.MeshStandardMaterial();
    transparentMaterial.visible = false;

    var cube = new THREE.Mesh( geometry, transparentMaterial);
    cube.position.set(0, 0, 0);

    updateNumber(lightType);//更新物体统计个数
    nameObject(light,lightType);//给物体命名，包括改名字相应的事件

    lights['ObjectGeneral'](light);//属性面板添加位置属性
    lights[lightType](light);//属性面板添加灯光属性
    lights['LightGeneral'](light);
    lights['SwitchShadow'](light);

    helper.gui = gui;
    activeObject = helper;
    // activeObject = light;
    propertyPanel.update();
    outliner.addOutlinerItem(light.name,light.id);
    // modifierViewer.addObject(mesh.name,mesh.id);
    materialPanel.update();
    modifierViewer.update();
    modifierSelectorViewer.update();
    
    scene.add(light);
    scene.add(helper);
    scene.add(cube);
    control.attach(light);
    
    helper.cube = cube;
    
    cube.light = light;
    cube.helper = helper;
    light.helper = helper;
    cube.type = lightType;
    helper.type = lightType;
}

this.addMeshLight = function(lightType){
    gui = new dat.GUI({autoPlace: false});
    if(lightType == 'PointLight'){
        var light = new THREE.PointLight(0xffffff);
        light.position.set(0,0,0);
        var helper = new THREE.PointLightHelper(light,20);
    }
    else if(lightType == 'AmbientLight'){
        var light = new THREE.AmbientLight(0xffffff);
        light.position.set(0,0,0);
        var helper = new THREE.AmbientLightHelper(light,20);
    }

    updateNumber(lightType);//更新物体统计个数
    nameObject(light,lightType);//给物体命名，包括改名字相应的事件

    lights['ObjectGeneral'](light);//属性面板添加位置属性
    lights[lightType](light);//属性面板添加灯光属性
    lights['LightGeneral'](light);//属性面板添加灯光属性

    light.gui = gui;
    activeObject = light;
    propertyPanel.update();
    materialPanel.update();
    outliner.addOutlinerItem(light.name,light.id);

    helper.type = lightType;
    scene.add(light);
    scene.add(helper);
    control.attach(light);
    }
}
